<!--直播课首页-->
<template lang="pug">
  kalix-master
    div
      div.main-first
        div.center-box
          div.video.float
            div
              LiveVideo(v-if="videoConfig.videoSrc" :videoSrc="videoConfig.videoSrc" :width="videoConfig.videoWidth" :height="videoConfig.videoHeight")
          div.thumb
            ul
              li(v-for="(item, index) in videoListSrc")
                router-link(@click.native="routerClick(item)" v-bind:to="{name: 'LiveMore', params: {name:item}}")
                  img(:src="item.imgUrl" height="110" width="200")
          div.clear
    div.main-second
      div.center-box
        div.star.float
          div.title
            span.dif-color 明 星
            span 主 播
          div.teacher.float(v-for="(item) in videoTeacher")
            router-link(v-bind:to="{name:'LiveAll', params: {name:item.uname}}")
              img.float(:src="item.icon" height="175" width="280")
              p.float {{item.uname}}
          div.clear
        div.hot
          div.title
            span.dif-color 热 门
            span 分 类
          div.classify.float(v-for="(item, index) in videoClass")
            router-link(v-bind:to="{name:'LiveAll', params: {name:item.name}}")
              img(:src="item.imgUrl" height="175" width="280")
              p {{item.name}}
        div.clear
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        videoConfig: {
          videoSrc: null,
          videoWidth: '982',
          videoHeight: '707'
        },
        videoListSrc: [],
        videoClass: [],
        videoTeacher: []
      }
    },
    mounted() {
      this.getVideo()
      this.getSixLive()
      this.getGenres()
      this.getTeacher()
    },
    methods: {
      routerClick(item) {
        window.sessionStorage.setItem('par', JSON.stringify(item))
      },
      getVideo() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/training/lives/getFirstLive'
        }).then(res => {
          // eslint-disable-next-line
          console.log('获取第一个直播间', res.data)
          this.videoConfig.videoSrc = res.data.data[0].liveUrl
          console.log('获取到的URL', this.videoConfig.videoSrc)
        })
      },
      getSixLive() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/training/lives/getSixLive'
        }).then(res => {
          // console.log('8888888888', res)
          this.videoListSrc = res.data.data
          console.log('获取右侧推荐直播间', this.videoListSrc)
        })
      },
      getGenres() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/training/classifys'
        }).then(res => {
          console.log('999999999999999999999999', res)
          this.videoClass = res.data.data
          console.log('获取所有直播分类', this.videoClass)
        })
      },
      getTeacher() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/training/hotlistsAnchors/getAllHotlistsAnchor'
        }).then(res => {
          console.log('000000000000000', res)
          this.videoTeacher = res.data.data
          console.log('获取所有推荐教师', this.videoTeacher)
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  /*舒适化样式*/
  *
    margin 0
    padding 0
    border 0

  a
    text-decoration none
    color #000

  img
    display block

  .float
    float left

  .clear
    clear both

  /*主内容一样式*/
  .main-first
    width 100%
    height 708px
    background-image url("/static/LiveBroadcastCourse/背景图_u2909.png")
    background-size 100% 100%
    padding 21px 0

  .center-box
    width 1200px
    margin 0 auto

  .video
    width 982px
    height 708px
    background-color #000

  .thumb
    float right

  .thumb a img
    margin-bottom 9.6px

  .last
    margin-bottom 0 !important

  /*主内容二样式*/
  .main-second
    margin-top 30px

  .title
    margin-bottom 26px

  .title span
    font-size 20px

  .dif-color
    color #008F95
    margin-right 6px

  .photo
    margin-right 15px

  .name
    font-size 16px

  .introduce
    font-size 14px
    color #999

  .introduce p
    margin-top 10px

  .hot
    margin-left 50px
    width 900px
    float right

  .classify
    margin-right 20px
    margin-bottom 20px

  .classify a p
    text-align center
    margin-top 5px

  .last-pic
    margin-right 0

  .star
    width 250px
    .teacher
      width 100%
      margin-bottom 10px
      img
        width 110px
        height 110px
        display block
      p
        margin-left 10px
</style>
